<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		body {
			color: #FFFFFF;
		}

		input {
			background-color: #FFFFFF88;
			position: absolute;
			width: 200px;
			height: 25px;
		}

		select {
			background-color: #FFFFFF88;
			width: 200px;
			height: 25px;
		}
	</style>
</head>
<body>
	<!-- GUI -->
	<canvas id="canvas" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></canvas>

	<select id="mode" style="position: absolute; top: 20px; right: 20px;"></select>
	<select id="providerColor" style="position: absolute; top: 50px; right: 20px;"></select>
	<select id="providerHeight" style="position: absolute; top: 80px; right: 20px;"></select>
	<select id="lod" style="position: absolute; top: 110px; right: 20px;"></select>

	<!-- API KEys -->
	<input id="mapbox_api" placeholder="Mapbox API KEY" style="top: 140px; right: 20px;"></input>
	<input id="heremaps_id" placeholder="HERE Maps ID" style="top: 170px; right: 20px; "></input>
	<input id="heremaps_code" placeholder="HERE Maps Code" style="top: 200px; right: 20px;"></input>
	<input id="bing_api" placeholder="Bing API KEY" style="top: 230px; right: 20px;"></input>
	<input id="maptiler_api" placeholder="MapTiler API KEY" style="top: 260px; right: 20px;"></input>
	<input id="openmap_tiles_server" placeholder="OpenMap Tiles URL" style="top: 290px; right: 20px;"></input>

	<!-- Code -->
	<script src="./providers.js"></script>
</body>
</html>